<template>
	<div class="w-full app-font-bold">
		<div class="text-[#96A5AA] text-base h-[18px] leading-[18px]">
			{{ $t('miniGames.risk') }}
		</div>
		<div class="h-[40px] w-full flex flex-nowrap gap-[8px] mt-[4px]">
			<div
				class="rounded-lg bg-[#3E4C68] h-[40px] flex flex-1 justify-center items-center cursor-pointer b-shadow hover-bg"
				:key="key"
				v-for="key in Object.keys(riskMaps)"
				:class="[risk === key ? 'bg-[#557086]' : '', isRuning || isDisabled ? 'disabled' : '']"
				@click="changeRisk(key)">
				<span>{{ riskMaps[key] }}</span>
			</div>
		</div>
	</div>
</template>
<style scoped>
.disabled {
	pointer-events: none; /* 禁止点击 */
	opacity: 0.5; /* 可选：视觉上表示禁用状态 */
	cursor: not-allowed;
}
</style>
<script lang="ts" setup>
import { watch, onMounted } from 'vue'
import { setGameCacheData, getGameCacheData } from '../../util'
import { riskTextMap, kenoRiskTextMap } from '@/views/games/config'

const props = defineProps({
	isRuning: {
		type: Boolean,
		default: false
	},
	isDisabled: {
		type: Boolean,
		default: false
	},
	risk: {
		type: String,
		default: ''
	},
	riskMaps: {
		type: <any>{},
		default: {}
	}
})
watch(
	() => props.risk,
	(val: string) => {
		setGameCacheData({
			risk: val
		})
	}
)
onMounted(() => {
	const gameCacheData = getGameCacheData()
	if (
		gameCacheData?.risk &&
		!riskTextMap()[gameCacheData?.risk] &&
		!kenoRiskTextMap()[gameCacheData?.risk]
	) {
		gameCacheData.risk = 'MEDIUM_RISK'
	}
	emit('changeRisk', gameCacheData?.risk || props.risk)
})
const emit = defineEmits(['changeRisk'])

const changeRisk = (val: string) => {
	if (props.isRuning || props.isDisabled) {
		return
	}
	emit('changeRisk', val)
}
</script>

<style lang="scss" scoped>
.b-shadow {
	box-shadow:
		0 1px 3px 0 rgba(0, 0, 0, 0.2),
		0 1px 2px 0 rgba(0, 0, 0, 0.12);
}
.hover-bg:hover {
	background-color: #557086;
}
</style>
